// @flow
import React, { Component } from 'react';
import { connect } from 'react-redux';
import type { State } from 'store';
// import type { UserData } from 'store/modules/user';
import { CommonActions } from 'store/actionCreators';
import DragableItem from 'components/Common/DragableItem';
// import storage, { keys } from 'lib/storage';

type Props = {
    id: string,
    title: string,
    type: string
};

class DraggableItemContainer extends Component<Props> {
    onNodeDragStart = (e, id) => {
        CommonActions.startDragging(id);
    };
    onNodeDrog = (e, ItemId) => {
        CommonActions.endDragging();
    };
    onNodeDragEnter = e => {
        CommonActions.endDragging();
    };
    onNodeDragLeave = e => {
        CommonActions.endDragging();
    };
    render() {
        const { onNodeDragStart, onNodeDrog, onNodeDragEnter, onNodeDragLeave } = this;
        const { id, title, type } = this.props;
        return (
            <DragableItem
                id={id}
                item={<div>title</div>}
                type={type}
                onNodeDrog={onNodeDrog}
                onNodeDragStart={onNodeDragStart}
                onNodeDragEnter={onNodeDragEnter}
                // onNodeDragEnd,
                onNodeDragLeave={onNodeDragLeave}
            />
        );
    }
}
// 把store导入Pros
const mapStatetoProps = ({ auth, base }: State) => {
    return {
        user: auth.user,
        username: auth.user && auth.user.name,
        userMenu: base && base.userMenu
    };
};

const mapDispatchtoProps = () => ({});
export default connect(
    mapStatetoProps,
    mapDispatchtoProps
)(DraggableItemContainer);
